<template>
  <div>
    <div class="top_title_icon">
      <i class="el-icon-office-building" style="float: left"></i>
      <h3>工作室</h3>
    </div>
    <el-divider></el-divider>
    <div>
      <el-row :gutter="30" type="flex" class="card_flex">
        <el-col :span="25" v-for="(nowPageData, index) in this.nowPageData" :key="index">
          <el-card :body-style="{ padding: '0px' }" shadow="hover">
            <img :src="nowPageData['studio_img']" alt="404" class="card_img" @click="toHomePage(nowPageData['id'])">
            <div class="el_card_footer_sty">
              <div class="bottom clearfix">
                <el-link @click="toHomePage(nowPageData['id'])" :underline="false" type="default">{{ nowPageData['studio_name'] }}</el-link>
              </div>
              <span class="el_card_footer_span_sty">{{ nowPageData['studio_location'] }}</span>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <div class="pagination">
      <el-pagination
        background
        layout="prev, pager, next"
        @current-change="handleCurrentChange"
        :page-size="size"
        :this.current="current"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  props:['searchInput'],
  data() {
    return {
      total:0,
      current:1,
      size:10,
      nowPageData:[],
      studioData:[],
    }
  },
  mounted() {
    this.getStudioInfo()
  },
  methods: {
    getStudioInfo() {
      this.$axios.get('api/studio/info/',{
      }).then((response)=>{
        const res = response.data
        if (res['respCode']==='000000'){
          this.studioData = res['list']
          this.total = this.studioData.length
          this.nowPageData = this.studioData.slice((this.current-1)*this.size,this.current*this.size)
        }else {
          console.log(res['respMsg'])
        }
      })
    },
    //页码切换的钩子
    handleCurrentChange(val) {
      this.current = val
      this.getStudioInfo()
      console.log(`当前页: ${val}`);
    },
    //路由传参跳转player
    toHomePage(id){
      this.$router.push({path:'/studio/homepage',query:{id:id}})
    },
  }
}
</script>

<style scoped>
.el-col-25{
  width: 20%;
}
.el-card {
  margin-bottom: 20px;
  border-radius: 20px;
}
.pagination {
  margin: 40px;
  text-align: center;
}
.card_flex {
  flex-wrap: wrap;
  flex-direction: row;
}
.top_title_icon {
  font-size: 40px;
  line-height: 40px;
  margin: 20px;
  color: #333
}
.el_card_footer_sty {
  background: black;
  padding: 14px;
}
.el_card_footer_span_sty {
  color: white;
  font-size: 10px;
}
.el-link.el-link--default:hover{
  color: #ebb563 !important;
}
.el-link.el-link--default {
  color: white;
  font-size: 15px;
}
.el-divider {
  background-color: #333333;
}
.card_img {
  width: 100%;
  height: 240px;
}
</style>
